<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>消息</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<style media="screen">

			.xiaoxi-top {
			margin: 0.75rem;
			border-bottom: 1px solid #222;
			overflow: hidden;
			padding-bottom: 1rem;
		}

		.xiaoxi-top div {
			text-align: center;
		}

		.xiaoxi-top img {
			width: 2.2rem;
			margin: 0 auto;
			border-radius: 0.2rem;
		}

		.xiaoxi-top p {
			color: #fff;
			font-size: 0.7rem;
			padding-top: 0.25rem;
		}

		.ad {
			background: #2f2f2f;
			height: 3rem;
			line-height: 3rem;
			margin: 0.75rem;
			text-align: center;
			font-size: 0.75rem;
			opacity: 0.5
		}

		.xiaoxi-list,
		.xiaoxi-list ul {
			background: none;
			color: #fff;
			border: 0;
		}

		.xiaoxi-list {
			border-top: 1px solid #222;
		}

		.xiaoxi-list .aui-list .aui-list-item {
			border-bottom: 0;
			background: none;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}

		.xiaoxi-list .aui-list-item-media {
			width: 3.5rem;
		}

		.xiaoxi-list .aui-list-item-title {
			font-size: 0.85rem;
			color: #fff;
			opacity: 0.9
		}

		.xiaoxi-list .aui-list-item-right {
			color: #fff;
			font-size: 0.65rem;
			color: #999
		}

		.xiaoxi-list .aui-ellipsis {
			font-size: 0.7rem;
			color: #999;
			position: relative;
			padding-right: 1rem;
			padding-top: 0.25rem;
		}
		.xiaoxi-list .aui-ellipsis img{
			width: 1rem;
			display: inline-block;
		  vertical-align: middle;
		}

		.xiaoxi-list .aui-badge {
			right: 0;
			left: inherit;
			top: 0;
		}
	</style>
	</head>

	<body>
		<div class="xiaoxi-top aui-card-list-footer">
			<div tapmode onclick="_url({url:'member_fensi',title:'粉丝'})"><img src="../i/xiaoxi-fensi.png" />
				<p>粉丝</p>
			</div>
			<div tapmode onclick="_url({url:'member_zan',title:'赞'})"><img src="../i/xiaoxi-zan.png" />
				<p>赞</p>
			</div>
			<!-- <div tapmode onclick="_url({url:'member_wode',title:'@我的'})"><img src="../i/xiaoxi-wode.png" />
			<p>@我的</p>
		</div> -->
			<div tapmode onclick="_url({url:'member_ping',title:'评论'})"><img src="../i/xiaoxi-ping.png" />
				<p>评论</p>
			</div>
		</div>
		<div class="ad">
			广告招租
		</div>

		<div class="aui-card-list xiaoxi-list ">
			<div class="aui-card-list-content">
				<script id="sx-list" type="text/x-dot-template">
					{{ for(var i=0,it=it.result; i < it.length; i++) { }}
				{{? it[i].conversationType == 'PRIVATE'}}
				{{ var extra=_message_user(_extra(it[i].latestMessage.extra));}}
				<li class="aui-list-item aui-list-item-middle uid_{{= it[i].senderUserId}}">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media" tapmode onclick="_u({{= extra.uid}})">
							<img src="{{= extra.img?_img(extra.img,100) : '../i/touxiang.png'}}" class="aui-img-round">
						</div>
						<div class="aui-list-item-inner"  tapmode onclick="view({{= it[i].targetId}},{uid:'{{= extra.uid}}',img:'{{= extra.img}}',nickname:'{{= extra.nickname}}'})">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">{{= extra.nickname}}</div>
								<div class="aui-list-item-right">{{= dateStr(it[i].sentTime/1000)}}</div>
							</div>
							<div class="aui-ellipsis">
								{{= _text(it[i].latestMessage.text)}}
								{{? it[i].unreadMessageCount}}
								<div class="aui-badge">{{= it[i].unreadMessageCount}}</div>
								{{?}}
							</div>
						</div>
					</div>
				</li>
				{{?}}
				{{ } }}
			</script>
				<ul class="aui-list aui-media-list" id="sx-view"></ul>
			</div>
		</div>

	</body>
	<script type="text/javascript" src="../j/api.js"></script>

	<script type="text/javascript">
		var rong, no = false;
		apiready = function() {
			rong = api.require('rongCloud2');
			list();
			// 回到屏幕
			api.addEventListener({
				name: 'viewappear'
			}, function(ret, err) {
				api.execScript({
					name: 'root',
					script: 'setOnReceiveMessageListener();'
				});
			});
			// 离开屏幕
			api.addEventListener({
				name: 'viewdisappear'
			}, function(ret, err) {});
			//应用进入后台事件
			api.addEventListener({
				name: 'pause'
			}, function(ret, err) {});
			// 应用从后台回到前台事件
			api.addEventListener({
				name: 'resume'
			}, function(ret, err) {
				list();
			});
			_shangla(function() {
				list()
			}, 1)
			// 接受消息
			api.addEventListener({
				name: 'xiaoxi_data'
			}, function(ret, err) {
				view_data(ret.value);
			});
		}

		function list() {
			rong.getConversationList(function(ret, err) {
				if (ret.result) {
					if (ret.result.length) {
						console.log(JSON.stringify(ret));
						var evalData = doT.template($api.html($api.byId('sx-list')));
						$api.html($api.byId('sx-view'), evalData(ret));
					}
					api.parseTapmode();
					api.refreshHeaderLoadDone();
					api.execScript({
						name: 'root',
						script: 'getTotalUnreadCount();'
					});
				}
			})
		}
		// 打开单聊页
		function view(id, user) {
			$('.uid_' + id + ' .aui-badge').remove();
			_message(id, user)
		}
		// 插入聊天模板
		function view_data(ret) {
			list();
			return;
			// console.log("view_data:"+JSON.stringify(ret));
			// return;
			var targetId = ret.targetId;
			var senderUserId = ret.senderUserId
			var _this = $('.uid_' + ret.senderUserId);
			ret.latestMessage = ret.content;
			if (_this.text()) {
				$('.uid_' + senderUserId).remove();
			}
			var evalData = doT.template($api.html($api.byId('sx-list')));
			$api.prepend($api.byId('sx-view'), evalData({
				"result": [ret]
			}));
			api.parseTapmode();
			// 获取来自某用户（某会话）的未读消息数
			rong.getUnreadCount({
				conversationType: ret.conversationType,
				targetId: ret.targetId
			}, function(ret_s, err) {
				console.log(JSON.stringify(ret_s));
				if (ret_s.result && ret_s.result != 0) {
					var _this = $('.uid_' + senderUserId + ' .aui-badge');
					if (_this.text()) {
						_this.text(ret_s.result);
					} else {
						$('.uid_' + senderUserId + ' .aui-ellipsis').append('<div class="aui-badge">' + ret_s.result + '</div>');
					}
				}
			})
		}
		// 时间戳
		function dateStr(date) {
			//获取js 时间戳
			var time = new Date().getTime();
			//去掉 js 时间戳后三位，与php 时间戳保持一致
			time = parseInt((time - date * 1000) / 1000);
			//存储转换值
			var s;
			if (time < 60) { //十分钟内
				return time + '秒前';
			} else if ((time < 60 * 60) && (time >= 60)) {
				//超过十分钟少于1小时
				s = Math.floor(time / 60);
				return s + "分钟前";
			} else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
				//超过1小时少于24小时
				s = Math.floor(time / 60 / 60);
				return s + "小时前";
			} else if ((time < 60 * 60 * 24 * 3) && (time >= 60 * 60 * 24)) {
				//超过1天少于3天内
				s = Math.floor(time / 60 / 60 / 24);
				return s + "天前";
			} else {
				//超过3天
				var date = new Date(parseInt(date) * 1000);
				return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
			}
		}
		// 清空所有对话
		function clearConversations() {
			rong.clearConversations({
				conversationTypes: ['PRIVATE']
			}, function(ret) {
				api.refreshHeaderLoading();
			})
		}
	</script>

</html>
